Layouts এবং Widgets

Flutter এ Layouts এবং Widgets হলো UI ডিজাইন এবং অ্যাপ্লিকেশন নির্মাণের প্রধান উপাদান। Widgets হলো Flutter অ্যাপ্লিকেশনের বিল্ডিং ব্লক, যা UI তৈরিতে ব্যবহৃত হয়, এবং Layouts হলো Widgets এর একটি স্ট্রাকচার বা বিন্যাস, যা বিভিন্ন UI উপাদান সঠিকভাবে স্ক্রিনে প্রদর্শন করতে সাহায্য করে। Flutter এ Layouts এবং Widgets একত্রে কাজ করে একটি সুন্দর এবং কার্যকরী UI তৈরি করে।

Layouts (লেআউটস):

Layouts হলো এমন Widget যা অন্যান্য Widget গুলোকে বিন্যস্ত করে এবং তাদের অবস্থান, আকার এবং বিন্যাস নির্ধারণ করে। Layout Widgets এর মাধ্যমে UI উপাদানগুলোকে স্ক্রিনে সঠিকভাবে স্থাপন করা যায়। Flutter এ কয়েকটি সাধারণ Layout Widgets নিয়ে আলোচনা করা হলো:

১. Column:

• Column Widget ব্যবহার করে Widget গুলোকে উল্লম্বভাবে (vertically) বিন্যস্ত করা যায়।
• উদাহরণ:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('First Item'),
    Text('Second Item'),
    Text('Third Item'),
  ],
)

• mainAxisAlignment: Column এর প্রধান অক্ষ বরাবর (উল্লম্ব) Widgets গুলোর অবস্থান কন্ট্রোল করে। উদাহরণস্বরূপ, MainAxisAlignment.center Widgets গুলোকে Column এর মাঝখানে স্থাপন করে।
• children: Column এর ভিতরে থাকা Widgets গুলোর তালিকা ধারণ করে।

২. Row:

• Row Widget ব্যবহার করে Widget গুলোকে আড়াআড়ি ভাবে (horizontally) বিন্যস্ত করা যায়।
• উদাহরণ:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.star),
    Icon(Icons.favorite),
    Icon(Icons.share),
  ],
)

• mainAxisAlignment: Row এর প্রধান অক্ষ বরাবর (আড়াআড়ি) Widgets গুলোর অবস্থান কন্ট্রোল করে। উদাহরণস্বরূপ, MainAxisAlignment.spaceEvenly Widgets গুলোকে Row এর ভিতরে সমান দূরত্বে স্থাপন করে।

৩. Container:

• Container একটি বহুমুখী Widget যা একাধিক Layout বৈশিষ্ট্য ধারণ করে, যেমন প্যাডিং, মার্জিন, বর্ডার, ব্যাকগ্রাউন্ড কালার ইত্যাদি।
• উদাহরণ:

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('This is a Container'),
)

• padding এবং margin: Container এর ভিতরের এবং বাইরের স্পেস নির্ধারণ করে।
• decoration: Container এর স্টাইল কাস্টমাইজ করতে সহায়ক, যেমন ব্যাকগ্রাউন্ড কালার এবং বর্ডার।

৪. Stack:

• Stack Widget ব্যবহৃত হয় বিভিন্ন Widget গুলোকে একের উপরে এক (overlapping) বিন্যস্ত করতে।
• উদাহরণ:

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

• Positioned: Stack এর ভিতরে Widget গুলোর নির্দিষ্ট অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।

Widgets (উইজেটস):

Widgets হলো UI এর বিল্ডিং ব্লক যা অ্যাপ্লিকেশনের বিভিন্ন উপাদান তৈরি করে। Widgets দুই প্রকার হতে পারে: Stateless Widget এবং Stateful Widget।

১. Basic Widgets:

• Flutter এ অনেকগুলি Basic Widget রয়েছে, যা সহজে UI তৈরি করতে ব্যবহৃত হয়:
  • Text: টেক্সট প্রদর্শনের জন্য ব্যবহৃত হয়।
  • Image: ইমেজ প্রদর্শনের জন্য ব্যবহৃত হয়।
  • Icon: আইকন প্রদর্শনের জন্য ব্যবহৃত হয়।
  • Button: বিভিন্ন ধরনের বাটন রয়েছে যেমন ElevatedButton, TextButton, এবং IconButton।

ElevatedButton(
  onPressed: () {
    print('Button Pressed');
  },
  child: Text('Click Me'),
)

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 32,
)

Image.network(
  'https://example.com/image.jpg',
  width: 100,
  height: 100,
)

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.black),
)

২. Input Widgets:

• ব্যবহারকারীর ইনপুট সংগ্রহ করতে ব্যবহৃত হয়:
  • TextField: টেক্সট ইনপুট নেওয়ার জন্য।
  • Checkbox এবং Radio: বুলিয়ান এবং সিলেকশন ইনপুটের জন্য ব্যবহৃত হয়।

Checkbox(
  value: true,
  onChanged: (bool? value) {
    // Handle change
  },
)

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Enter your name',
  ),
)

৩. Layout Widgets:

• Widgets গুলোকে স্ক্রিনে বিন্যস্ত করার জন্য Layout Widgets ব্যবহৃত হয়। উদাহরণস্বরূপ:
  • Expanded: Row বা Column এর ভিতরে Widget গুলোকে স্ক্রিনের উপলব্ধ জায়গা পূর্ণ করতে সহায়তা করে।
  • Padding: Widgets এর চারপাশে স্পেস যোগ করতে ব্যবহৃত হয়।

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('This text has padding'),
)

Expanded(
  child: Container(
    color: Colors.blue,
  ),
)

৪. Scrollable Widgets:

• Flutter এ স্ক্রলেবল Widgets রয়েছে যা ব্যবহারকারীকে UI এর মধ্য দিয়ে স্ক্রল করতে দেয়।
  • ListView: একটি স্ক্রলেবল লিস্ট তৈরি করতে।
  • SingleChildScrollView: একটি Widget এর কন্টেন্ট স্ক্রল করতে ব্যবহার হয়।

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Text('Scrollable content here'),
      // More widgets...
    ],
  ),
)

ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

Flutter Layouts এবং Widgets এর সমন্বয়:

• Flutter এ Layouts এবং Widgets একত্রে কাজ করে একটি UI ডিজাইন করার জন্য। উদাহরণস্বরূপ, একটি Column এর ভিতরে Container এবং Text Widget ব্যবহার করে স্ক্রিনে একটি সুন্দর বিন্যাস তৈরি করা যায়।
• Layout Widgets যেমন Row, Column, Stack ইত্যাদি ব্যবহার করে Widgets গুলোকে সঠিকভাবে স্থাপন করা হয় এবং Basic Widgets যেমন Text, Image, Button ইত্যাদি ব্যবহার করে UI এর কন্টেন্ট প্রদর্শন করা হয়।

Flutter এ Layouts এবং Widgets এর সাহায্যে একটি সম্পূর্ণ UI তৈরি করা যায় যা নেটিভ পারফর্ম্যান্স প্রদান করে এবং নেটিভ ডিজাইনের মতই দেখায়।

Flutter-এ লেআউট (Layouts) হলো উইজেটগুলোর মধ্যে সম্পর্ক তৈরি করে অ্যাপ্লিকেশনের ভিজ্যুয়াল স্ট্রাকচার গঠন করার একটি পদ্ধতি। Flutter-এ লেআউট তৈরি করতে উইজেট ব্যবহৃত হয়, এবং প্রতিটি লেআউট উইজেট একটি কন্টেইনার হিসেবে কাজ করে যেখানে অন্যান্য উইজেট বা চাইল্ড উইজেটগুলো রাখা হয়। Flutter-এ লেআউট তৈরির মূল ধারণা হলো, প্রতিটি UI উপাদান একটি উইজেট, এবং উইজেটগুলো গঠনের মাধ্যমে ভিউ তৈরি করা হয়।

Flutter Layouts এর মৌলিক ধারণা

1. Widgets: Flutter-এ সবকিছুই উইজেট, এবং লেআউট তৈরির জন্যও উইজেট ব্যবহার করা হয়।
2. Nested Widgets: Flutter-এ উইজেটগুলো অন্য উইজেটের ভেতর নেস্ট করা যায়। এর মাধ্যমে আপনি একটি জটিল UI সহজেই তৈরি করতে পারেন।
3. Parent-Child Relationship: Flutter-এ লেআউট তৈরিতে প্রতিটি উইজেটের প্যারেন্ট-চাইল্ড সম্পর্ক থাকে। প্যারেন্ট উইজেটগুলো চাইল্ড উইজেটকে কন্টেইন করে এবং লেআউট নিয়ন্ত্রণ করে।
4. Single Child এবং Multiple Child Layouts: Flutter-এ কিছু লেআউট উইজেট একটিমাত্র চাইল্ড উইজেট গ্রহণ করে (যেমন Container, Center), আবার কিছু উইজেট একাধিক চাইল্ড উইজেট গ্রহণ করতে পারে (যেমন Row, Column)।

Flutter Layouts এর প্রধান উইজেটসমূহ

Flutter-এ লেআউট তৈরি করতে ব্যবহৃত কিছু গুরুত্বপূর্ণ উইজেট নিচে দেওয়া হলো:

১. Container

Container উইজেট হলো একটি বহুমুখী লেআউট উইজেট যা প্যাডিং, মার্জিন, সাইজ, এবং বর্ডার সেট করতে ব্যবহৃত হয়। এটি একটি চাইল্ড উইজেটকে ধারণ করতে পারে।

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text('Hello'),
  ),
)

২. Row এবং Column

Row এবং Column উইজেটগুলো হলো Flutter-এ লেআউট তৈরির জন্য সবচেয়ে সাধারণ উইজেট। এগুলো একাধিক চাইল্ড উইজেট ধারণ করতে পারে এবং চাইল্ড উইজেটগুলোকে অনুভূমিকভাবে (Row) বা উল্লম্বভাবে (Column) সাজাতে সাহায্য করে।

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('First'),
    Text('Second'),
    Text('Third'),
  ],
)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

৩. Stack

Stack উইজেট ব্যবহৃত হয় যখন আপনি উইজেটগুলোকে একটির ওপর আরেকটি রাখতে চান, অর্থাৎ Z-axis এ লেআউট করতে চান। Stack এর মাধ্যমে আপনি বিভিন্ন স্তরে (layer) চাইল্ড উইজেট রাখতে পারেন।

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

৪. ListView

ListView একটি স্ক্রলযোগ্য উইজেট যা অনেক আইটেম একসঙ্গে প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত লম্বা তালিকা তৈরি করতে ব্যবহৃত হয়, যেমন চ্যাট অ্যাপ্লিকেশন বা প্রোডাক্ট তালিকা।

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo),
      title: Text('Album'),
    ),
  ],
)

৫. GridView

GridView ব্যবহার করে আপনি চাইল্ড উইজেটগুলোকে গ্রিড ফর্ম্যাটে সাজাতে পারেন। এটি এমন লেআউট তৈরিতে সহায়ক যেখানে উইজেটগুলো গ্রিড আকারে (rows এবং columns) সাজানো হয়।

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    Container(color: Colors.blue),
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.yellow),
  ],
)

৬. Expanded এবং Flexible

Expanded এবং Flexible উইজেটগুলো Row বা Column-এর চাইল্ড হিসাবে ব্যবহৃত হয় এবং সেগুলোর স্পেস নিয়ন্ত্রণ করে। এটি ব্যবহার করে আপনি উইজেটের আকারের কন্ট্রোলিং করতে পারেন।

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.blue,
        height: 50,
      ),
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 50,
    ),
  ],
)

৭. Padding এবং Align

• Padding: একটি চাইল্ড উইজেটের চারপাশে স্পেস যোগ করতে ব্যবহৃত হয়।
• Align: চাইল্ড উইজেটকে একটি নির্দিষ্ট জায়গায় পজিশন করতে ব্যবহৃত হয়।

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('This is padded'),
)

Align(
  alignment: Alignment.topRight,
  child: Text('Top Right'),
)

Layouts এর কাস্টমাইজেশন

Flutter-এ লেআউট উইজেটগুলো অত্যন্ত কাস্টমাইজেবল। আপনি বিভিন্ন প্যারামিটার এবং প্রপার্টি ব্যবহার করে উইজেটগুলোকে কাস্টমাইজ করতে পারেন, যেমন:

• mainAxisAlignment এবং crossAxisAlignment: Row এবং Column এর চাইল্ডগুলোর অবস্থান নির্ধারণ করে।
• padding, margin, এবং alignment: Container, Padding, এবং Align এর মাধ্যমে বিভিন্ন ধরনের কাস্টমাইজেশন করা যায়।

Flutter Layouts এর মূল ধারণা

• ডিজাইন এবং ফ্লেক্সিবিলিটি: Flutter লেআউট উইজেট ব্যবহার করে খুব দ্রুত এবং সহজে জটিল ডিজাইন তৈরি করা যায়।
• মাল্টিপ্ল প্ল্যাটফর্ম সাপোর্ট: একই লেআউট উইজেট ব্যবহার করে Android, iOS, ওয়েব এবং ডেস্কটপের জন্য এক্সপ্রেসিভ UI ডিজাইন তৈরি করা যায়।
• Responsive UI: Flutter এর লেআউট উইজেট এবং কাস্টমাইজেশন প্রপার্টি ব্যবহার করে আপনি সহজেই responsive UI তৈরি করতে পারেন, যা বিভিন্ন স্ক্রিন সাইজে মানানসই হয়।

এইভাবে, Flutter এর লেআউট উইজেট এবং কনসেপ্টগুলো ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে সুন্দর এবং কার্যকরীভাবে গঠন করতে পারেন।

Flutter এ Container, Row, এবং Column হলো মৌলিক Widget যা অ্যাপের UI তৈরিতে বহুল ব্যবহৃত হয়। এগুলো ব্যবহার করে বিভিন্ন লেআউট এবং স্ট্রাকচার তৈরি করা যায়। নিচে প্রতিটি Widget এর ব্যবহার এবং উদাহরণ বিস্তারিতভাবে আলোচনা করা হলো।

১. Container Widget:

• Container একটি বহুমুখী Widget যা UI উপাদানগুলোকে লেআউট এবং স্টাইলিং করার জন্য ব্যবহৃত হয়। এটি মূলত একটি বক্স তৈরি করে যেখানে আপনি বিভিন্ন Widget রাখতে পারেন এবং বিভিন্ন স্টাইল অ্যাপ্লাই করতে পারেন।
• Container এ আপনি padding, margin, alignment, decoration, এবং size সেট করতে পারেন।

Container এর উদাহরণ:

Container(
  width: 200,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'Hello, Container!',
    style: TextStyle(color: Colors.white),
  ),
)

• এখানে একটি Container তৈরি করা হয়েছে যার প্রস্থ এবং উচ্চতা নির্ধারিত।
• margin এবং padding সেট করা হয়েছে।
• alignment দ্বারা টেক্সটকে মাঝখানে রাখা হয়েছে।
• decoration এর মাধ্যমে ব্যাকগ্রাউন্ড কালার এবং বর্ডার রেডিয়াস সেট করা হয়েছে।

২. Row Widget:

• Row Widget ব্যবহার করে একই লাইনে (horizontally) একাধিক Widget সাজানো যায়। এটি লম্বালম্বিভাবে (Horizontally) উপাদানগুলোকে প্লেস করে।
• Row Widget এর children প্রপার্টিতে একাধিক Widget প্রদান করা যায়। আপনি mainAxisAlignment এবং crossAxisAlignment প্রপার্টি ব্যবহার করে Row এর মধ্যে Widget গুলোর অবস্থান নিয়ন্ত্রণ করতে পারেন।

Row এর উদাহরণ:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, color: Colors.yellow),
    Text('Row Item 1'),
    ElevatedButton(onPressed: () {}, child: Text('Button')),
  ],
)

• mainAxisAlignment ব্যবহার করে Row এর মধ্যে উপাদানগুলোকে সমান দূরত্বে (spaceEvenly) রাখা হয়েছে।
• crossAxisAlignment ব্যবহার করে সব Widget এর মাঝখান বরাবর স্থাপন করা হয়েছে।
• Row এর মধ্যে একটি Icon, একটি Text এবং একটি ElevatedButton রাখা হয়েছে।

৩. Column Widget:

• Column Widget ব্যবহার করে উপরে থেকে নিচে (vertically) একাধিক Widget সাজানো যায়। এটি উপাদানগুলোকে উল্লম্বভাবে (Vertically) প্লেস করে।
• Column Widget এর children প্রপার্টিতে একাধিক Widget প্রদান করা যায় এবং mainAxisAlignment এবং crossAxisAlignment ব্যবহার করে Widget গুলোর অবস্থান নিয়ন্ত্রণ করা যায়।

Column এর উদাহরণ:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('Column Item 1'),
    SizedBox(height: 20),
    Text('Column Item 2'),
    ElevatedButton(onPressed: () {}, child: Text('Click Me')),
  ],
)

• mainAxisAlignment ব্যবহার করে Column এর মধ্যে Widget গুলোকে উল্লম্বভাবে মাঝখানে রাখা হয়েছে।
• crossAxisAlignment ব্যবহার করে উপাদানগুলোকে বাম দিক থেকে (start) শুরু করে রাখা হয়েছে।
• SizedBox ব্যবহার করে উপাদানগুলোর মধ্যে স্পেস তৈরি করা হয়েছে।
• Column এর মধ্যে দুটি Text এবং একটি ElevatedButton রাখা হয়েছে।

Containers, Rows, এবং Columns একসাথে ব্যবহার করা:

• Container একটি বক্স বা ঘের তৈরি করে, যেখানে আপনি Row এবং Column ব্যবহার করে বিভিন্ন উপাদান সাজাতে পারেন।
• Row এবং Column একই সাথে ব্যবহার করে একটি জটিল লেআউট তৈরি করা যায়।

উদাহরণ:

Container(
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(10),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('Item 1'),
          Icon(Icons.star, color: Colors.yellow),
        ],
      ),
      SizedBox(height: 20),
      Text('Another item below the row'),
      ElevatedButton(onPressed: () {}, child: Text('Press Me')),
    ],
  ),
)

• এখানে একটি Container এর মধ্যে একটি Column রাখা হয়েছে, যেখানে প্রথমে একটি Row এবং পরে অন্যান্য উপাদান রয়েছে।
• Row এ Text এবং Icon রাখা হয়েছে, যা এক লাইনে (Horizontally) প্লেস করা হয়েছে।
• Column এ SizedBox ব্যবহার করে দুই উপাদানের মধ্যে স্পেস তৈরি করা হয়েছে।
• শেষে একটি ElevatedButton রাখা হয়েছে।

সারাংশ:

• Container: একক UI উপাদান ঘের এবং স্টাইলিং করার জন্য ব্যবহৃত হয়।
• Row: একই লাইনে (Horizontally) একাধিক Widget সাজাতে ব্যবহৃত হয়।
• Column: উপরে থেকে নিচে (Vertically) একাধিক Widget সাজাতে ব্যবহৃত হয়।
• Containers, Rows, এবং Columns একত্রে ব্যবহার করে জটিল এবং রেসপন্সিভ UI লেআউট তৈরি করা যায়।

Flutter এ Stack এবং Positioned Widget ব্যবহার করে একের উপরে এক (overlapping) বা নির্দিষ্ট অবস্থানে Widgets গুলোকে বিন্যস্ত করা যায়। এগুলো মূলত এমন UI ডিজাইন করতে সাহায্য করে যেখানে বিভিন্ন Widget একে অপরের উপর স্থাপন করা হয় বা নির্দিষ্ট পজিশনে থাকে।

Stack Widget:

Stack হলো একটি Layout Widget, যা তার চাইল্ড Widget গুলোকে একের উপরে এক রাখে। এটি Widgets গুলোকে একটি স্তর হিসেবে (layers) সাজিয়ে স্ক্রিনে প্রদর্শন করে। Stack Widget ব্যবহার করে আপনি জটিল UI তৈরি করতে পারেন, যেমন কার্ড, ডায়ালগ বক্স, ব্যানার, এবং ইমেজের উপরে টেক্সট।

Stack এর বৈশিষ্ট্য:

• Stack এ Widgets গুলো overlay (একটির উপরে আরেকটি) অবস্থায় থাকে।
• এর প্রতিটি চাইল্ড Widget তার প্যারেন্টের আকার অনুযায়ী অবস্থান নেয়।
• Widgets গুলো Stack এর মধ্যে তাদের পজিশনিং অনুযায়ী সাজানো হয় (Top-Left, Top-Right ইত্যাদি)।

Stack এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Example')),
        body: Center(
          child: Stack(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.green,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• এই উদাহরণে, Stack এর ভিতরে তিনটি Container Widget রয়েছে। প্রতিটি Container একে অপরের উপর overlay হিসেবে সাজানো হয়েছে।
• বড় Container টি নিচে এবং ছোট Container গুলো তার উপরে থাকে।

Positioned Widget:

Positioned হলো Stack এর একটি চাইল্ড Widget, যা Stack এর ভিতরে থাকা Widgets গুলোর নির্দিষ্ট অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। Positioned Widget ব্যবহার করে আপনি একটি Widget কে Stack এর মধ্যে নির্দিষ্ট পজিশনে রাখতে পারেন, যেমন স্ক্রিনের টপ, বটম, লেফ্ট বা রাইট সাইডে।

Positioned এর বৈশিষ্ট্য:

• Positioned শুধুমাত্র Stack এর চাইল্ড হিসেবে ব্যবহার করা যায়।
• top, bottom, left, এবং right প্রপার্টির মাধ্যমে Widget এর নির্দিষ্ট পজিশন নির্ধারণ করা হয়।
• Positioned Widget Stack এর ভিতরে Widget এর অবস্থান নির্দিষ্ট করতে ব্যবহৃত হয়।

Positioned এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Positioned Example')),
        body: Center(
          child: Stack(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Positioned(
                top: 20,
                left: 20,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
              Positioned(
                bottom: 0,
                right: 0,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• এখানে, একটি Stack রয়েছে যার মধ্যে তিনটি Container Widget রয়েছে। প্রথম Container টি সম্পূর্ণ Stack এলাকা দখল করে এবং লাল রঙে দেখানো হয়েছে।
• দ্বিতীয় Container টি Positioned Widget এর মাধ্যমে Stack এর top: 20 এবং left: 20 পজিশনে রাখা হয়েছে।
• তৃতীয় Container টি Positioned Widget এর মাধ্যমে Stack এর bottom: 0 এবং right: 0 পজিশনে রাখা হয়েছে।

Stack এবং Positioned Widgets এর সমন্বয়:

• Stack Widget এবং Positioned Widget একসাথে ব্যবহার করে আপনি জটিল এবং কাস্টম UI ডিজাইন করতে পারেন, যেমন কার্ড ডিজাইন যেখানে ইমেজের উপর টেক্সট রাখা হয়, বা একটি ব্যানার যেখানে বাটন স্ক্রিনের নিচে স্থাপন করা হয়।
• Positioned Widget ব্যবহার করে স্ক্রিনের নির্দিষ্ট স্থানে কোনো Widget রাখা যায়, যা Responsive ডিজাইন তৈরিতে সাহায্য করে।

Stack এবং Positioned এর ব্যবহারিক ক্ষেত্র:

• ইমেজ ওভারলে: ইমেজের উপর টেক্সট বা বাটন স্থাপন করতে।
• কার্ড ডিজাইন: কার্ডের উপরের অংশে বিভিন্ন আইটেম সাজাতে।
• ডায়ালগ এবং পপআপ: স্ক্রিনের নির্দিষ্ট অংশে ডায়ালগ বক্স বা পপআপ তৈরি করতে।

Flutter এ Stack এবং Positioned Widget ব্যবহার করে একটি জটিল এবং সুন্দর UI তৈরি করা যায়। এগুলো বিশেষ করে এমন ডিজাইন এবং UI উপাদানের জন্য উপযোগী, যেখানে Widgets গুলো overlay বা নির্দিষ্ট পজিশনে থাকে।

Flutter-এ Responsive UI তৈরি করা খুবই গুরুত্বপূর্ণ, বিশেষ করে যখন আপনার অ্যাপ্লিকেশনটি বিভিন্ন ডিভাইস এবং স্ক্রিন সাইজে (যেমন মোবাইল, ট্যাবলেট, ওয়েব, এবং ডেস্কটপ) মানানসই করে প্রদর্শন করতে হবে। Flutter আপনাকে এক্সপ্রেসিভ এবং ফ্লেক্সিবল টুলস প্রদান করে, যা দিয়ে আপনি সহজেই responsive ডিজাইন তৈরি করতে পারেন। নিচে Flutter-এ Responsive UI তৈরির কিছু কৌশল এবং টুলস আলোচনা করা হলো:

Responsive UI তৈরির কৌশল

1. MediaQuery ব্যবহার করা
2. LayoutBuilder ব্যবহার করা
3. Flexible এবং Expanded উইজেট ব্যবহার করা
4. AspectRatio এবং FittedBox ব্যবহার করা
5. OrientationBuilder ব্যবহার করা

১. MediaQuery ব্যবহার করা

MediaQuery উইজেট ব্যবহার করে আপনি ডিভাইসের স্ক্রিন সাইজ, পিক্সেল ডেনসিটি, এবং ওরিয়েন্টেশন সম্পর্কে তথ্য পেতে পারেন। এটি responsive ডিজাইন তৈরিতে সবচেয়ে সাধারণ এবং শক্তিশালী পদ্ধতি।

import 'package:flutter/material.dart';

class ResponsiveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // স্ক্রিনের প্রস্থ এবং উচ্চতা পাওয়ার জন্য MediaQuery ব্যবহার করা হচ্ছে
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(title: Text('Responsive UI Example')),
      body: Center(
        child: Container(
          width: screenWidth * 0.8, // স্ক্রিন প্রস্থের ৮০% নেবে
          height: screenHeight * 0.3, // স্ক্রিন উচ্চতার ৩০% নেবে
          color: Colors.blue,
          child: Center(child: Text('Responsive Container')),
        ),
      ),
    );
  }
}

• MediaQuery এর মাধ্যমে আপনি স্ক্রিন সাইজের ডায়নামিক ভ্যালু পেতে পারেন এবং তা অনুসারে কন্টেন্টের আকার এবং বিন্যাস নির্ধারণ করতে পারেন।

২. LayoutBuilder ব্যবহার করা

LayoutBuilder একটি ফ্লেক্সিবল পদ্ধতি যা প্রাথমিক উইজেটের কনটেইনারের আকার অনুযায়ী উইজেট তৈরি করতে সাহায্য করে। এটি একটি বিল্ডার ফাংশন প্রদান করে, যেখানে আপনি কনটেইনারের প্রস্থ এবং উচ্চতার ওপর ভিত্তি করে উইজেট তৈরি করতে পারেন।

import 'package:flutter/material.dart';

class LayoutBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth < 600) {
            // মোবাইল স্ক্রিনের জন্য ডিজাইন
            return Container(
              color: Colors.blue,
              child: Center(child: Text('Mobile View')),
            );
          } else {
            // ট্যাবলেট বা বড় স্ক্রিনের জন্য ডিজাইন
            return Container(
              color: Colors.green,
              child: Center(child: Text('Tablet/Desktop View')),
            );
          }
        },
      ),
    );
  }
}

• LayoutBuilder স্ক্রিনের প্রস্থ অনুযায়ী বিভিন্ন লেআউট তৈরি করতে ব্যবহৃত হয়।

৩. Flexible এবং Expanded ব্যবহার করা

Flexible এবং Expanded উইজেট ব্যবহার করে আপনি কন্টেইনার বা উইজেটের প্রস্থ বা উচ্চতা ডাইনামিকভাবে পরিচালনা করতে পারেন, যা responsive UI তৈরিতে সহায়ক।

Row(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
  ],
)

• এখানে দুইটি কন্টেইনার ব্যবহার করা হয়েছে, যেগুলোর প্রস্থ স্ক্রিন সাইজ অনুযায়ী ডাইনামিকভাবে নিয়ন্ত্রিত হবে।

৪. AspectRatio এবং FittedBox ব্যবহার করা

• AspectRatio: এটি একটি নির্দিষ্ট অনুপাত ধরে রাখতে সাহায্য করে। উইজেটটি স্ক্রিন সাইজ পরিবর্তন হলেও অনুপাত ঠিক রাখে।
• FittedBox: এটি কন্টেন্টকে প্যারেন্ট কন্টেইনারে ফিট করাতে সহায়ক, বিশেষ করে যখন স্ক্রিনের সাইজ ছোট বা বড় হয়।

AspectRatio(
  aspectRatio: 3 / 2,
  child: Container(color: Colors.orange),
)

• AspectRatio দিয়ে আপনি একটি নির্দিষ্ট প্রস্থ-উচ্চতার অনুপাত সেট করতে পারেন, যা responsive UI তৈরিতে কাজে আসে।

৫. OrientationBuilder ব্যবহার করা

OrientationBuilder উইজেট ব্যবহার করে আপনি স্ক্রিনের ওরিয়েন্টেশন (Portrait বা Landscape) অনুযায়ী লেআউট পরিবর্তন করতে পারেন।

import 'package:flutter/material.dart';

class OrientationBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Orientation Builder Example')),
      body: OrientationBuilder(
        builder: (context, orientation) {
          if (orientation == Orientation.portrait) {
            // Portrait Mode
            return Center(child: Text('Portrait Mode'));
          } else {
            // Landscape Mode
            return Center(child: Text('Landscape Mode'));
          }
        },
      ),
    );
  }
}

• OrientationBuilder ব্যবহার করে আপনি UI কে স্ক্রিনের ওরিয়েন্টেশন অনুসারে পরিবর্তন করতে পারবেন।

অন্যান্য গুরুত্বপূর্ণ টুলস ও কৌশল:

1. FractionallySizedBox: এটি স্ক্রিনের একটি নির্দিষ্ট অংশে একটি উইজেট রাখতে সহায়ক।
2. Responsive Frameworks: আপনি চাইলে Flutter এর প্যাকেজ হিসেবে পাওয়া যায় এমন ফ্রেমওয়ার্ক (যেমন responsive_framework বা flutter_screenutil) ব্যবহার করতে পারেন, যা responsive ডিজাইন আরও সহজ করে তোলে।
3. Responsive Widgets: কিছু উইজেট যেমন Wrap, GridView, Expanded ইত্যাদি উইজেটগুলো responsive লেআউট তৈরিতে সহায়ক।

Responsive UI এর জন্য সাধারণ টিপস:

• স্ক্রিন সাইজ অনুযায়ী স্টাইল পরিবর্তন: বিভিন্ন স্ক্রিন সাইজে UI কে মানানসই করতে হলে প্রস্থ এবং উচ্চতার অনুপাত ব্যবহার করুন।
• Flex এবং Expanded উইজেট ব্যবহার করুন, যাতে চাইল্ড উইজেটগুলো ডাইনামিকভাবে সাইজ পায়।
• স্ক্রিনের ওরিয়েন্টেশন (Portrait/ Landscape) পরিবর্তন হলে লেআউট সামঞ্জস্য করতে OrientationBuilder ব্যবহার করুন।
• স্ক্রিন সাইজ অনুযায়ী টেক্সট এবং ইমেজের সাইজ সামঞ্জস্য করুন, যাতে ছোট এবং বড় স্ক্রিন উভয় ক্ষেত্রেই টেক্সট এবং ইমেজ স্পষ্ট দেখা যায়।

উদাহরণ: Responsive Layout তৈরির জন্য একটি সম্পূর্ণ কোড

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Responsive Layout Example')),
        body: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth < 600) {
              // মোবাইল ভিউ
              return Column(
                children: [
                  Container(height: 100, color: Colors.blue),
                  Container(height: 100, color: Colors.green),
                ],
              );
            } else {
              // ট্যাবলেট বা ডেস্কটপ ভিউ
              return Row(
                children: [
                  Expanded(child: Container(color: Colors.blue, height: 200)),
                  Expanded(child: Container(color: Colors.green, height: 200)),
                ],
              );
            }
          },
        ),
      ),
    );
  }
}

এইভাবে, Flutter-এ MediaQuery, LayoutBuilder, এবং অন্যান্য responsive টুলস ব্যবহার করে আপনি একটি শক্তিশালী এবং ব্যবহারবান্ধব responsive UI তৈরি করতে পারবেন।